import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { observer } from 'mobx-react-lite';
import { Ionicons } from '@expo/vector-icons';

export const MaintenancePage = observer(() => {
  const [selectedTab, setSelectedTab] = useState('overview');

  const vehicleInfo = {
    brand: '丰田',
    model: '凯美瑞',
    year: '2020',
    plateNumber: '京A12345',
    currentMileage: 45000,
    nextServiceMileage: 50000,
  };

  const maintenanceItems = [
    {
      id: '1',
      title: '机油更换',
      status: 'completed',
      date: '2024-01-10',
      mileage: 40000,
      cost: 300,
    },
    {
      id: '2',
      title: '空气滤清器',
      status: 'upcoming',
      date: '2024-02-15',
      mileage: 45000,
      cost: 150,
    },
    {
      id: '3',
      title: '刹车片检查',
      status: 'upcoming',
      date: '2024-03-01',
      mileage: 50000,
      cost: 200,
    },
  ];

  const renderMaintenanceItem = (item: any) => (
    <View key={item.id} style={styles.maintenanceItem}>
      <View style={styles.maintenanceHeader}>
        <Text style={styles.maintenanceTitle}>{item.title}</Text>
        <View
          style={[
            styles.statusBadge,
            item.status === 'completed'
              ? styles.completedBadge
              : styles.upcomingBadge,
          ]}
        >
          <Text
            style={[
              styles.statusText,
              item.status === 'completed'
                ? styles.completedText
                : styles.upcomingText,
            ]}
          >
            {item.status === 'completed' ? '已完成' : '即将到期'}
          </Text>
        </View>
      </View>
      <View style={styles.maintenanceDetails}>
        <View style={styles.detailItem}>
          <Ionicons name="calendar-outline" size={16} color="#64748b" />
          <Text style={styles.detailText}>{item.date}</Text>
        </View>
        <View style={styles.detailItem}>
          <Ionicons name="speedometer-outline" size={16} color="#64748b" />
          <Text style={styles.detailText}>
            {item.mileage.toLocaleString()} km
          </Text>
        </View>
        <View style={styles.detailItem}>
          <Ionicons name="cash-outline" size={16} color="#64748b" />
          <Text style={styles.detailText}>¥{item.cost}</Text>
        </View>
      </View>
    </View>
  );

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>保养管理</Text>
        <TouchableOpacity style={styles.addButton}>
          <Ionicons name="add" size={24} color="#0ea5e9" />
        </TouchableOpacity>
      </View>

      <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
        {/* 车辆信息 */}
        <View style={styles.vehicleCard}>
          <View style={styles.vehicleHeader}>
            <Ionicons name="car" size={32} color="#0ea5e9" />
            <View style={styles.vehicleInfo}>
              <Text style={styles.vehicleName}>
                {vehicleInfo.brand} {vehicleInfo.model}
              </Text>
              <Text style={styles.vehicleDetails}>
                {vehicleInfo.year}年 • {vehicleInfo.plateNumber}
              </Text>
            </View>
          </View>
          <View style={styles.mileageInfo}>
            <View style={styles.mileageItem}>
              <Text style={styles.mileageLabel}>当前里程</Text>
              <Text style={styles.mileageValue}>
                {vehicleInfo.currentMileage.toLocaleString()} km
              </Text>
            </View>
            <View style={styles.mileageItem}>
              <Text style={styles.mileageLabel}>下次保养</Text>
              <Text style={styles.mileageValue}>
                {vehicleInfo.nextServiceMileage.toLocaleString()} km
              </Text>
            </View>
          </View>
        </View>

        {/* 保养进度 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>保养进度</Text>
          <View style={styles.progressCard}>
            <View style={styles.progressHeader}>
              <Text style={styles.progressLabel}>距离下次保养</Text>
              <Text style={styles.progressValue}>
                {(
                  vehicleInfo.nextServiceMileage - vehicleInfo.currentMileage
                ).toLocaleString()}{' '}
                km
              </Text>
            </View>
            <View style={styles.progressBar}>
              <View
                style={[
                  styles.progressFill,
                  {
                    width:
                      `${((vehicleInfo.currentMileage / vehicleInfo.nextServiceMileage) * 100).toFixed(0)}%` as any,
                  },
                ]}
              />
            </View>
          </View>
        </View>

        {/* 保养记录 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>保养记录</Text>
          <View style={styles.maintenanceList}>
            {maintenanceItems.map(renderMaintenanceItem)}
          </View>
        </View>

        {/* 快捷操作 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>快捷操作</Text>
          <View style={styles.quickActions}>
            <TouchableOpacity style={styles.quickAction}>
              <Ionicons name="add-circle" size={24} color="#0ea5e9" />
              <Text style={styles.quickActionText}>添加保养</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.quickAction}>
              <Ionicons name="calendar" size={24} color="#10b981" />
              <Text style={styles.quickActionText}>保养提醒</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.quickAction}>
              <Ionicons name="document-text" size={24} color="#f59e0b" />
              <Text style={styles.quickActionText}>保养报告</Text>
            </TouchableOpacity>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8fafc',
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#e2e8f0',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#1e293b',
  },
  addButton: {
    padding: 8,
  },
  content: {
    flex: 1,
    padding: 20,
  },
  vehicleCard: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 20,
    marginBottom: 20,
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 1,
  },
  vehicleHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 16,
  },
  vehicleInfo: {
    marginLeft: 12,
    flex: 1,
  },
  vehicleName: {
    fontSize: 18,
    fontWeight: '600',
    color: '#1e293b',
    marginBottom: 4,
  },
  vehicleDetails: {
    fontSize: 14,
    color: '#64748b',
  },
  mileageInfo: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  mileageItem: {
    alignItems: 'center',
  },
  mileageLabel: {
    fontSize: 12,
    color: '#64748b',
    marginBottom: 4,
  },
  mileageValue: {
    fontSize: 16,
    fontWeight: '600',
    color: '#1e293b',
  },
  section: {
    marginBottom: 20,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#1e293b',
    marginBottom: 16,
  },
  progressCard: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 20,
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 1,
  },
  progressHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 12,
  },
  progressLabel: {
    fontSize: 14,
    color: '#64748b',
  },
  progressValue: {
    fontSize: 16,
    fontWeight: '600',
    color: '#1e293b',
  },
  progressBar: {
    height: 8,
    backgroundColor: '#e2e8f0',
    borderRadius: 4,
    overflow: 'hidden',
  },
  progressFill: {
    height: '100%',
    backgroundColor: '#0ea5e9',
  },
  maintenanceList: {
    backgroundColor: '#fff',
    borderRadius: 12,
    overflow: 'hidden',
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 1,
  },
  maintenanceItem: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#f1f5f9',
  },
  maintenanceHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 12,
  },
  maintenanceTitle: {
    fontSize: 16,
    fontWeight: '500',
    color: '#1e293b',
  },
  statusBadge: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 12,
  },
  completedBadge: {
    backgroundColor: '#dcfce7',
  },
  upcomingBadge: {
    backgroundColor: '#fef3c7',
  },
  statusText: {
    fontSize: 12,
    fontWeight: '500',
  },
  completedText: {
    color: '#16a34a',
  },
  upcomingText: {
    color: '#d97706',
  },
  maintenanceDetails: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  detailItem: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  detailText: {
    fontSize: 14,
    color: '#64748b',
    marginLeft: 4,
  },
  quickActions: {
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  quickAction: {
    alignItems: 'center',
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 16,
    flex: 1,
    marginHorizontal: 4,
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 1,
  },
  quickActionText: {
    fontSize: 12,
    color: '#64748b',
    marginTop: 8,
    textAlign: 'center',
  },
});
